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التحمنیر الإليكترونى للصف الثانی الإعدادى ۲۰۱۷ DOES‏ 


ل = کک سے 


ج يستنتج أن موقع الويب 
يتكون من صفحة ويب 


صفحةالو يب (نص-صو ر 52 
فيديو_ارتباط تشعبي) 


Static Web Page 
الويب التفاعلية‎ 
Dynamic Web Page. 


IE E E E OC E E E ED ج22‎ 


أ/ مخمود سید قرتى ۰۱۱۸۲۱۸۸٦۰6/۸‏ 


ان يتعرف على بعض المفاهيم الهامة (موقع الويب/ الصفحة الرئيسة/صفحة الويب) 
ان يقارن بين الصفحة الرئيسية للموقع والصفحة الافتراضية 
ان يدرك الفرق بين وصفحات الويب الثابتة وصفحات الويب التفاعلية 

: ماذا تعرف عن مواقع الانترنت ؟ 

1 جهاز عرض 512057 1(945-+- جهاز الكمبيوتر+السبورة 


Tg TETER KEES 


ی ا ا کک کک کک کک 


0 [ Sd 


9 هم بببي cO U‏ 
مفاهيم وأساسجات مواقج انوب 


2 
3 


موقح الويب :- 
هو عبارة عن صفح ويب أو أكثر مترابطة مع بعضها تحت اسم معين 
ملاحظة :- يمكن زيارة موقع الويب من خلال الكمبيوتر أو الهاتف 


صفحة الويب -:Web Page‏ 
هی مستند به محتوى إلكترونى يُنشر على شبكة الإنترنت ويتم عرضه من خلال 
الصفحة الرئيسة للموقج -:Home Page‏ 
هى أول صفحة بموقع الويب والتى من خلالها يتم الانتقال لباقى صفحات الموقع 
هی ( صور - نصوص - فيديو - ارتباط تشعبى ) 


آتوان الصفعات | 
١‏ صفحات الويب النابتة 


هی صفح يكون محتواها ثابت 


؟) صفحات الويب التفاعلية 
ھی صفح معلومات تعرض محتوى يتيح 


وتستخدم لعرض معلومات للزائرين التفاعل معه ومعالجته. 
للاطلاع ا ا اجماء | تستخدم أوامر ,1111/11 بالإضافت للغات 
ی معالجنّ عليها من الزائرين . : 
أ< شل لغت ]27256011[ ولخت 
000 | ری ا وين و 


۴ فى تصميم هذا النوع من 


5 هذا ال : الصفحات 
تصميم هذا النوع من اتات 


5 التحمنیر الاليكترونى للصف الثانی الإعدادی ۲۰۱۷ > أ/ مخمود سید قرنى ۰۱۱٥۸۲۱۸۸76/۸‏ 0 
1 1 
1 ۲ 
4 2 
1 چ ڪڪ ڪڪ كك | الفط _ 1 
لم الذهداف الاجراية | 
« جر ا اسه 4 
1 : 7 5 | 
١‏ معرفى (انيذكر مراحل تصميم وإنشاء موقع الويب. ١‏ 
مهارى ان يقارن بين مراحل تصميم وإنشاء موقع الويب. 
١‏ وجدانى يدرك اهمية الانترنت فى البحث عن الصور ١‏ 
E : 2‏ : : 2 
[/) التهيئة س١:-‏ | قم بالتقاط مجموعة من الصور لمدرستك من فصول ومعامل وملاعب... . 1 
الوسائل التعليمية | جهاز عرض 510:7 12948-+- جهاز الكمبيوتر+السبورة 
أ اختاجضصة ا 7 التفکیرالاجداع |١١‏ 
1 إهدتراليجية  ١‏ 0 , التفكيرال2جداعی | ٠,‏ 
ل هعاجة لمحتو اا إجراءات الدرس  ١‏ عم صمي ال 
/ ا ص ا 
عاسو RS‏ 1 الى و ' 
0 صر 9 
COUNTY U UU CO 9 /‏ رمم 1 
TT‏ مراحل تصميم وانشاء موقح الويب ١‏ 
4 كر ل 0 أ الرحلتةالأولى: التخطيط لبناء موقع ويب 4 
إ۲ | وإنشاء موقع الويب. -١‏ وضع مخطط بسيط على الورق للصفحة الرئيسيت وصفحات الويب للموقع 1 
١‏ 1 ؟"- تحديد البيانات والمعلومات التى تتضمنها صفحات الويب ١‏ 
كم بد يرسم مخطط بسيط على المرحلت‌الثانية: ‏ تصميم صفحات الويب وتنسيقها 24 
' الاورق يتضمن صفحات الموقع | )١‏ تصميم شكل الصفحت الرئيسيت وصفحات الويب إ! 
لقو يشم رن تت ۲) تحديد لون الخلفيت لصفحات الويب ك 
/ ج *) تحديد أماكن وضع النصوص والصور ولقطات الفيديو بصفحات الويب / 
© الصفحات ويب موقع مدرستي. 4 ER LT‏ ۰ 
)٤ ١‏ تحديد الارتباطات التشعبينّ داخل صفح الويب وصفحات الموقع 
يه + يبحث عن النصوص اللازمة المرحلة الثالثة: الإعداد والتجهيز 4 
: لضفحات الويت المختلفة. نين ولق النصوص والصور والصوت و الفيديو وحفظها داخل أحد : 

8 ك 

# يلتقط مجموعة من الصور | المرحلت الرابعت: التنفيذ(يإستخدام أحد لغات البرمجه واوامر (HTML‏ 
١‏ لمدرسته من فصول ومعامل )١‏ تحويل التصميم إلى صفحات ويب ١‏ 
© | وملاعب.... (r‏ وضع البيانات ( نصوص - صور - صوت - فيديو) فى صفحات الويب 2 
1 3 2 *) إنشاء الارتباطات التشعبيت لصفحات الو 1 
| 2 يحفظ a e‏ المرحلت الخامست: تشرالموقع عبر ÊS‏ 
© أحد وحدات التخزين 2 
1 ته حجز عنوان للموقع » وتخصيص مساحة تخزنية له على أحد أجهزة الخادم / 
لنشرالوقع ١‏ 
4 9 
1 1 
١ ١‏ 
ا 


5 التحضنير الإاليكترونى للصف الثانى الإعدادى ۲۰۱۷ 


9 a OD @ a كسس @ ارت‎ OD @ a O 20 a OD @ a ارت‎ @ a O @ a OD @ a ارت‎ @ a OD @ a OD @ a OD @ a O @ a OS @ a ارت »مس 0 رن‎ 


QR 


ج أ/ مخمود سید قرتى ۰۱۱۸۲۱۸۸٦۰6/۸‏ 
عدوان الدرس : ۱ 
انشا وهعالجة اوم 
هلفات امود 
الأهداف الاجر ١‏ 


معرفي 1 
مهيارى 
وجدانی 


التهيئة 


-:١س‎ 


الوسائل التعليمية 


الصوتي باستخدام 
برنامج Audacity‏ 
في إنشاءومعالجة 
الصوت. 


+ يعدل في 
مقاطع الصوت 
باضافة تأثير 


نيه | 


نيه 
ان تعرف على ماهية برنامج 41112)117/ 

ان يقوم بتحميل البرنامج 

ان يدرك امكانيات برنامج 411012600117/ فى معالجة الاصوات 
ماذا تعرف عن برامج معالجة الاصوات ؟ 

جهاز عرض 5112077 1(948-+- جهاز الكمبيوتر+السبورة 


UOT 
مو وع‎ 


CO 9‏ بببي يل 


ا ا 


COUN‏ يعم 


Audacity : برنامج‎ 

خطوات انشاء ملف صوتى :- 9 
ود مرحدة اام ویز وضد مد موي )1040| (08D‏ 
-١‏ جمع البيانات التى يتم تسجيلها صوتياً 
7 التأكد من المكونات البرمجيت بتثبيت أحد برامج انشاء ومعالجة الصوت على جهاز الكمبيوتر 
- التاكد من توصيل المكونات المادية ( توصيل الميكرفون والسماعات بجهاز الكمبيوتر ) 
ثانيا : مرحلت التنفيذ لإنشاء ملف صوتى 
-١‏ تحميل احد برامج إنشاء ومعالجتّ الصوت مثل برنامج 4110126167 
- تسجيل الصوت بالضغط على زر التسجيل Record button‏ 
۳- ادخال البيانات النصيت للكمبيوتر باستخدام الميكرفون 
+ للانتهاء من التسجيل بالضغط على زر الإيقاف 


-للاستماع إلى الصوت من خلال السماعات بالضغط على زر التشغيل 1”127 "Play"‏ ® 


8 


(O "Stop 
روف‎ 


Record button 


Stop 


5 التحمنیر الاليكترونى للصف الثانی الإعدادى ۲۰۱۷ أ/ مخمود سید قرنى ۰۱۱٥۸۲۱۸۸٦6/۸‏ 0 
نو ا“ . | 
ر ٠‏ 
9 9 
1 1 
لا حح 
4 الأهداف الاجر انيه" 1 2 
1 1 
١‏ معرفي ان يتعرف على خطوات تعديل الصوت ١‏ 
e 1‏ 5 9 
1 مهيارى ان يشرح فص ولصق وحدف الصوت 1 
١ 1 1 1 1 ١‏ 
غ2 وجدانى أن يشعر بسهولة العمل بالبرنامج ك 
ْ التهيئة س١:-‏ |مالفرق بين النسخ والقص ؟ : 
© الوسائل التعليمية | جهاز عرض :5180 129428-+- جهاز الكمبيوتر+السبورة 2 
١ ==> => >>> a_> 3 1‏ 
إستراتيجية ٠١‏ 5 , القفكير الاجداعى 2 / | 
© /,_ هعالجة الحمحتوى / إجراءات الدرس ' تعليم تعاوني 05٠‏ 
E 2 1‏ ا الا ا #ببوط70ططت7تاقتتتتتااتْْظْل5ل1579757750570570172975ي ن ن نے نے كام تيد ب 1 
AS ¢ 550 |‏ [ اع :و ١‏ 
َ صرالدرس ر 
1 9 هل CUN‏ 7ه ارم 1 
ثالثا: مرحلت التعديل فى الصوت 
-١ /‏ إضافت تأثير على مقطع الصوت: / 
١‏ د ذل في مقاظع من خلال قائمت 1111601 أختر منها أحد التأثيرات المطلويت ١‏ 
5 | الصو 007 ؟"- قص ولصق مقطع صوتى م 
١ . 1‏ 0 أ- احدد المقطع الصوتى المطلوب قصه ب- افتح قائمت ٤d1)‏ اختر منها Cu‏ 1 
؟! | (قص /واللصق/ الحذف). ج - ضع مؤشر القراءة عن المكان المطلوب عمل لصق للمقطع الصوتى ١‏ 
9 د - افتح قائمت ]1801 اختر منها 7223516 9 
1 ع حذف مقطع من الصوت 1 
١ ١‏ 
بلا بضع تأثبرات أ - احدد المقطع الصوتى المطلوب حذفه ب- اضغط على مفتاح 1061616 من لوحت المفاتيح 
ا 8 7 كي رابعا: مرحلي تصدير ملف الصوت 
١‏ جدمقاطع الصوة. -١‏ قائمت ۴11٤‏ اختر منها الامر 411010 ١ Export‏ 
4# - يظهر مريع احدد فيه مكان حفظ الملف و الامتداد المناسب للف الصوت 4 
1 ملاحظت :- # هناك انواع مختلفت لإمتداد الصوت مثل ۷4۸۷ . 1113 وهناك 1 
[ *” يُصدر الصوت إلى فروق بينهما ‏ | : 0 ٍ 00000 
ملف بامتدادمناسب + كلمت تصدير الملف الصوتى تعنى جعل الملف الصوتى كتل واحدة 
الامتداد الجودة Ca‏ لنشر عبر المواقع ١‏ 
(WAV_MP3) ١‏ شب الوضو. حتت 
ا ا | غيرملائم للنشر2 | 
١‏ | اق جو 
% 
1 
١‏ 
0 


ي- 
F4‏ 


2 0 سه 


a ان‎ 2-- a OP. 


OF--‏ مه 


التحمنیر الاليكترونى لصف الثانی الإعدادى ۲۰۱۷ 


QR 


ج أ محكمود سید قرتى م *۱19۸11۸۸٦16/‏ 


عنوان الدرس : اليوم 
إخضاء وهعالجة الت يخ 
5 5 9 
هلفات الفيديو 
١‏ الفتسرة 
معرفى (نن يتعرف على برنامج 011121511001 
مهارى | ان يقوم بتحميل البرنامج 
وجدانی ان يدرك قدرات البرنامج فى معالجة الفيديوهات 
التهيئة س١:-‏ أ ماهى اهم برامج معالجة الفيديوهات ؟ 
الوسائل التعليمية | جهاز عرض 511201 120948-+- جهاز الكمبيوتر+السبورة 
٠‏ استراتيجية ‏ | 5 1 خعلم ذاقى 
هعالجة المحتوى / / إجراءان الت رس | تخعليم تعاوفی 
عناصر SI CASA‏ 
مو وغ ارال 
الدرس o 004470 CUN COE‏ 
2# برنامج 0761151101 
يستورد ملفات | هناك نوعان من البرامج لإنشاء ومعالجت ملفات الفيديو :- 
(صور/ صوت) /١‏ مفتوحة المصدر :مثل برنامج 0[1(©1151101() تعمل من خلال نظام التشغيل 71/112010155آ Linux,‏ 
باستخدام )١‏ مغلقت المصدر :- مثل برنامج ۴۲ Movie Mak‏ يعمل من خلال تخ „_Win‏ 
برنامج أ واجهه برنامج 014اكدءم0 17 
0penShot‏ | ١الشريط‏ الرئيسى 00152 Main!-lalnت‏ المشروع u ® Project Files‏ | 
تحرير ۳-شريط الوظائف 121 11111011011 ( للتنقل بين ملفات المشروع- ملفات انور - ملفات الصوت 
ومعالجنّ ملفات 5 : : 
د ؛-معاينة الفيديو Preview W11d0W‏ ه-شريط التحرير :100133 Edit‏ 
06 آظ ”-التصغير والتكبير 511061 200117 ۷-مۋشر القراءة Play head / Ruler‏ 
۸-الشریط الزمنى 11112161116" 
مااحظة :- ٭ يحتوى الشريط الزمنى على - 
د ١)المسطرة‏ :- تظهر المدى الزمنى الحالى بالشريط الزمنى 
ينشئ مشاهد ۲١‏ )رأس الفقرة :يقرأ الكليب الحالى الذى يقف عليه فى الشريطالزمنى ليظهر فى نافدة المعاينة 
فيديوداخل ۳) الكليب الحالى :- قد يكون صورة أو صوت أو لقطت فيديو 
ترتامج معائجة :مارت AS‏ الطيقات التى يتم وضع صورة أو صوت أو فيديو عليها 
خطوات إنشاء فيديو 
ملفات الفيديو : . 
|١-استيراد‏ ملفات الصور داخل البرنامج :- من خلال طريقين: قائمت 1116 اختر الامر files Import‏ 
ثم تظهر الصور فى تبويب ملفات المشروع أو الضغط على زر 800 + الموجودة فى الشريط الرئيسى 
۲ ترتيب الصور على الشريط الزمنى للبرنامج 
۳- استيراد ملفات الصوت داخل البرنامج ( نفس طرق استيراد الصور ) 
“- معاينه الفيديو: بالضغط على زر التشغيل حط 2137 فى نافذة معاينة الفيديو 


التحمنیر الإليكترونى للصف الثانی الإعدادى ۲۰۱۷ ج أ/ محمود سید قرنى ۰۱۱۸۲۱۸۸٦۰6/۸‏ 


1 عنوان الدرس : 
أ خاجع إخشاء وهعالجة 
/ هلفات الفيديو 
١‏ 
ا 
١‏ معرفى (نن يتعرف على خطوات تعديل وحفظ مشاهد الفيديو 
: ميارى | ان يقوم بتعديل بعض مشاهد الفيديو 
وجدانی ان يشعر بسهولة تعديل لقطات الفيديو باستخدام البرنامج 
| التهيئة س١:-‏ | كيف يمكن حفظ وتخزين المشروعات ؟ 
1 الو سائل التعليمية | جهاز عرض 510 1(268-+- جهاز الكمبيوتر+السبورة 
لا“ إستزاتيجية 
, ۶ هعالجة المحتوى , 
١‏ 
عخاصر ¢ (tS‏ [ اق :و 
1 مو وع رالا 
أ الدرهس 19 GC UU CO‏ 004074 ابم 
خطوات حفظ مشروع فيديو _ عن طريق 
1 ١-افتح‏ قائمت 111 اختر منها الامر Save project AS‏ 
| ؟"-تظهر نافذة احدد فيها اسم المشروع ( باللغة الإنجليزية ) والامتداد يفضل ان يكون 0S‏ 
1 * يعدل في خطوات تعديل مشاهد الفيديو من خلال 
؟ | مشاهد الفيدبء ١|‏ التحكم فى الفترة الزمنية المخصصت لعرض مشهد فيديو. 
؟-إضافت تأثيرات ٥٤٤5‏ لمشهد الفيديو من خلال تبويب ۴٥٤۲5‏ تظهر مجموعه من التأثيرات 
1 ونلاحظ ظهور ( رمز التأثير - واسم التأثير - امر حذف التأثير Remove Effect‏ ) 
١‏ 50 ة 5000 
چو يحفظ ملف إضافت مراحل انتقاليت 1۲34151٤1015‏ بين مشاهد الفيديو - 
o wm‏ 
نص r‏ | 


التحمنير اتويت للصف الثانی الإعدادى ۲۰۱۷ أ/ محموت سید قرتى ۰۱۱۸۲۱۸۸٦۰6/۸‏ 
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0 وو 15 اندم 
/ خاجع إنساء وهعالجة التاريخ 


الأهداف الاجرانية 


معرفىي ان يتعرف على كيفية إضافة نص لمشاهد الفيديو 
مهارى ان يقوم ب تصدير الفيديو إلى ملف بإمتداد مناسب 
وجدانی ان يبدي اهتماما ويستجيب اثناء العمل بالبرنامج 
التهيئة س١:-‏ | كيف تضيف مراحل انتقالية للفيديو ؟ 
الوسائل التعليمية ‏ جهاز عرض W٥ط؟‏ 1(248-+- جهاز لو ا 
TT‏ ار 
'.ر هعالجة الححتوى /,ر إجراادات الدرس ..' التعليم التعاوذي 
عناصر ¢ AS‏ [ 3 و 
الدرس 9 هم اااي CINE‏ ابم 


١-افتح‏ قائمت ©11]1' ثم اختر الامر 1)1٤‏ 


عن طريق 


> يضيف (مراحل 
انتقالية/ نص) 
لمشاهد الفيديو. 


يصدر الفيديو إلى 
ملف بامتداد مناسب 


١ 
1 
4 
۱ 
1 
4 
۱ 
1 
4 
۱ 
١ 
4 
۱ 
1 
4 
۱ 
1 
4 
۱ 
١ 
4 
۱ 
1 
4 
۱ 
١ 
4 
۱ 
١ 
4 
۱ 
١ 
4 
۱ 
1 
١ 
0 
0 


١-يظهر‏ مربع حوارى اختار منه ( نوع القالب ونوع الخط ولون الخط ولون الخلفيت 
*-احفظ النص فى الملف بالضغط على الامر 53۷8( ويجب حفظه باللغة الإنجليزيت ) 
؛-يظهر الملف النصى فى ملفات المشروع "1'1165 "Project‏ 
تصدير الفيديو إلى ملف بإمتداد مناسب عن طريق 
-١‏ اضغط على زر تصدير فيديو "71060 110011 " من شريط الرئيسى 

أومن خلال قائمتّ ©1711 اختر منها الامر تصدير فيديو "17/1060 011م::] " 
؟-يظهر مربع احدد فيه اسم الفيديو ومكان الحفظ ونوع امتداد ملف الفيديو مثل 

(AVI.Mp4 ( 


Edıt ع1‎ View Help 
mm سه‎ 


ct Files 


vide 


زر لصدير 
الفيديو 


owAll Video Audio Image 


مدرسة السنية الإعدادية للبنات 


1 
1 
42 
م‎ 
١ 
42 
1 
١ 


4 
١ 


2 


0 
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التحمنیر الاليكترونى لصف الثانی الإعدادى ۲۰۱۷ Doz‏ أ/ محمود سید قرنى ۰۱۱۸۲۱۸۸/۸ 


عنوان الدرس : 


الوسائل التعليمية | جهاز 


- 


.2 س بحب يت يت افع سل عت ننه سم نكا بل 


> تعريف لغة HTML‏ 
< أوامر HTML‏ 


> القواعدالأساسيةلإنشاء 
صفحة ويب 
بإستخدام H1 M1‏ 
> التركيب البنائي لإنشاء 
صفحة ويب ٠‏ 
باستخدام H1 M1‏ 
> إضافة عنوان لصفحة 
الويب بالأمر: 
<title>....</title>‏ 


ماهى أهم الأوامر 
الأساسية للغة 
Html‏ ؟ 


a O @ a O- 
04 


2 


لغة الترميزر HTML‏ 


f O Bm 202 f O Bm 202 f O Bm 202 a O Bm 202 î O Bm 202 f O Bm 22 î O Bm 22 ا كسس‎ 


معرفى نان يتعرف على مفهوم لغة HTML‏ 

ان يشرح القواعد ( المتطلبات ) الأساسية عند إنشاء صفحة ويب باستخدام أوامر 
ممسارك  HTIML‏ 
وجدانى :نن يبدى اهتماما لتعلم لغة التكويد 1117/11 


التهيئة س١:-‏ كيف يمكن تصميم صفة ويب ؟ 


عرض 5112088 1(968-+- جهاز الكمبيوتر+السبورة 


2 ؤاض‎ [ ) ttt 


موک وع 
9 هل cO CHU‏ رال 
لخت الترميز 1111111 :- هى لغة تكويد لإنشاء صفحات مواقع الإنترنت الثابتة والتى 
يتم عرضها بإستخدام أحد برامج مستعرضات الإنترنت . 
ملاحظة :- أوامر لخت 1111/11 تسمى هذه الاوامر بال 1255" 
القواعد ( المتطلبات ) الأساسيت عند إنشاء صفحتة ويب باستخدام أوامر 1111/11 
١-فتح‏ ملف نصى بإستخدام أحد برامج تحرير النصوص مثل برنامج 11016730 عن 
طريق(افتح قائمة 51211 ثم اختر 5121115 710 ثم اختر ملحقات 20065501165 ثم اختر 
(Notepad‏ ؟-عند كتابة أوامر 1111/11 يتم كتابة الامر بين علامتى < > 
٣-معظم‏ الأوامر لها يداي < > ولهانهايت </ > 
“يتم حفظ الملف النصى الذى يحتوى على أوامر [M1‏ بإمتداد HIM. وî HTML‏ 
د-يتم فتح الملف المحفوظ بإستخدام مستعرض الإنترنت ومشاهدة نتيجتة تنفيذها 
> التركيب البنائي لإنشاء صفحة ويب بإستخدام, 111711 
» #شرح الاوامر الاساسيت للغت M1‏ 11 $+ 


يكتب هذا الامر فى بداينّ الكود » يشير أن الصفحت مكتويت بلغت 


html >‏ < اهاط وينقسم لقسمين رئيسين هما :- body . head‏ 


يختص بمعلومات المستعرض حول الصفحةت 
ا 


الصفحر المنطقت الخاصت بكتابت 
بن 
يتم من خلاله ڪتابت عنوان صفحة الويب 


ا 
! 
2 
ا 
! 
© 


QR 


ج أ/ محموت سید قرتى ۰۱۱۸۲۱۸۸٦۰6/۸‏ 0 


التحمنیر الاليكترونى لصف الثانی الإعدادى ۲۰۱۷ 


عخوان الذز س : 


1 1 
١‏ / إضافة خص لصفة الوجيب ١‏ 
9 3 9 
1 1 
١ ١‏ 
9 9 
: معرفىي ان يتعرف على كيفية اضافة نص لصفة الويب : 
4 ان يقوم بتغيير إتجاه صفحة الويب باستخدام الخاصية "الامر" 51۸ 2 
1 مهيارى 2 1 
١ 2 1 ١‏ 
0 وجدانی ان يدعم زملائة فى فريق عمل على الجهاز 2 
: التهيئة س١:-‏ ماهو هو بديل الضغط على مفتاح ENTER‏ ؟ : 
© الوسائل التعليمية | جهاز عرض :5107 1(968-+- جهاز الكمبيوتر+السبورة 9 
Tg ESSELTE 1‏ 
ا“ استراتيجية << 0 1 عغعضصف د هني 1 
> / هعالجة المحتوى “ر إجراءات الدرس ' تعليم تعاوني ‏ ٣م‏ 

1 خخ Sims‏ اح کے 5 2 
SONNY CURSE ١‏ 
م عناصر الدرس 20 
١‏ 09 هل COMMU CU‏ رم | 
| | > إضافة نص مثال على إضافة محتوى لصفحة الويب وليكن "مدرستى جميلة ونظييفة ومتطورق ‏ رر ( 
mi>‏ < 
9 لصفحة ملاحظات عامت عند كتابت اوامر لخت <head> HTML‏ »( 
1 الويب ١-بعد‏ كتابت أى أمر فى برنامج محرر النصوص "الدفتر" n a hi eS‏ | 
| (30م721016 ) يجب حفظه اولا من خلال قائمت 1116 اختر 5056 : <يشعطي 
< تغييراتجاه ؟-مشاهدة نتيجة تنفينالاوامر داخل O,‏ الويب(1 ض): 5 وتظيقه وصسطوره 2 
ا *-مستعرض الإنترنت لا يتأثر بالمسافات المتروكة أو بالانتقال لسطر جديد بضغط على موت اوها | 
0 باستخدام | ؛-يمكن ان تكتب أوامر ,1117/11 بحروف كبيرة أو صغيرة 3 
1 الخاصيه ميتم كتبت علامت> أو< نحول لكتابت للغت لإنجليزيت ثم نضغط على مفتاحى ]51111 مع حرف ز أو ظا | 
dir 1‏ © ف تغيير إتجاه صفحت الويب باستخدام الخاصية "الامر" “011 ١‏ 
<html> 5 9 TS 5 1 20 %‏ جا 
/ 4 الكتابة د يتم تغيير اتجاه صفحة الويب حسب القيمتة الملخصصة ( 1)] أو 1)۲ ) للخاصيت ۳ حيث vie‏ 
١‏ الخاصيت تأثيرها ©1غ+3+/> محرستي <©83+1> | ؛ 
من سطر = -—— </head>‏ 
rtl a 0‏ لجعل اتجاه صفحة الويب من اليمين إلى اليسار (D Kkbody dir="rt1">‏ 
٠ ٠ 1‏ || ع1 |الجعل اتجاه صفحت الويب من اليسار إلى اليمين كن 1 
e ١‏ » الکتابت تكون من بدایت سطر جدید 4+ محاذاه النص ( توسيط ) النص ١ </body>‏ 
0 اس د کک ر س 2 س mm a ms ıı ms i e a ms i‏ د ممم <2 /ht‏ 4 
/ > وط |0 باستخدام الامر < ٣ظ‏ > أ بإستخدام امر_> 6061 / < ..... > center‏ < 
)| النص بالأمر <body> <body>‏ | 
<center>.. ©‏ الله اكبر | <1111©/>ذكر الله <center>‏ 2 
<br> </center> | (|‏ | الله اكبر | 
| لله الحمد 
0 و <br>‏ 2 
</body> /‏ | ولله الحمد 
</body> ۱ E 5 ١‏ / 
5 سے 8 
2 س 00 اكتب كود توسيط النص واخر لجعله على سطر جديد ؟ Nae a‏ 


RQ 
08 ۰۱۱٥۸۲۱۸۸٩۰/۲ التحضير الاليكترونى للصف الثانى الإعدادى ۲۰۱۷ ج أ/ محمود سيد قرنی‎ 5 
ع ظ‎ ١ 
۲ و‎ 7 
2 ./>( 
| 1 
ا الذهداف التجرانيي”*! ظ‎ 
4 | جر ا اسه‎ 5 
/ ل‎ 25 1 
ان يتعرف على خطوات تغيير الخلفية‎ 
ميارى ان يقوم بوضع صورة للمدرسه على الصفحة‎ 
١ وجدانی ان يطلب يبدى استجابة اثناء تطبيق عناصر الدرس‎ ١ 
7 PETE u 1 9 
1 التهيئة س١:- /مالفرق بين لون الخلفية وصورة الخلفية ؟‎ 6 
الوسائل التعليمية | جهاز عرض :510 12948-+- جهاز الكمبيوتر+السبورة‎ 
البحث والاستكشاف ل‎ /17 ١“ إستراتيجية‎ 1 
0 3 هعالجة المحتوى / لم 5 ا خعليم تعاوني‎ ' 
REE. 
١ روه‎ oY CUS 
4 . عخاصرالدرس‎ 
1 رمم‎ COUNTY U UU هل‎ 9 
١ اضافتّ فرغات ( مسافات ) بين الكلمات بإستخدام الامر [8:1115 مع تكراره‎ 
(shif)+ 7 العلامت & تكتب عن طريق الضغط على مفتاحى(‎ -١ : ملاحظتة‎ 
5: ) العلامت ؛ تكتب عن طريق الضغط على مفتاح ( ك‎ -" 0 
4 tcenter= إضافة مسافة فارغة بين‎ > 
1 رمرعطدك موقع‎ nbsp; nbsp; ڭnاbsp; المدريية‎ &nbsp الكلمات بالأمر‎ 
١ 


حت”لات خا اكات f‏ 2 م 
تحديد لون كخلفيةلصفحة الويب بإستخدام الخاصية -ر0[10ع175 : 
تستخدم الخاصية (٤010١‏ التابعه للامر <10017> لتحديد لون الخلفيت | وم 


> تحديد لون كخلفية لصفحة 
الويب بالخاصية 


<body bgecolor="green" < bgcolor 


. اي 8# مكعااضية کح | باستخدام الخاصيت “15261200101 


لصفحة الويب بالخاصية 


(body background= 1magel, PDE (||  Backerouna 
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التحمنير ا الثانى الإعدادى ۲۰۱۷ ج أ/ محمود سید قرتى ۰۱۱۸۲۱۸۸٦۰6/۸‏ 


2© f O Bm 


QR 


< اذكرى | > اذکری استخام الاوار ‏ <0ا>, <8>, <> 000 ) الاوامر > <i> „<b> ,<u‏ 


رک ر 


1 
١‏ 
% 
1 
١‏ 
% 
1[ معرفىي ان يتعرف على كيفية تنسيق الخط 
١‏ 1 
«4 مهيارى ان يقوم بتغييرحجم ونوع ولون الخط 
' وجدانى | ان يستجيب لاستخدام اوامر تنسيق الخط 
التهيئة س١:-‏ اماهى وظيفة الامر ۴۵۸1 ؟ 
١‏ الوسائل التعليمية | جهاز عرض 5101 12948-+- جهاز الكمبيوتر+السبورة 
> . حم و ES‏ 
١0‏ إاستراتيجية 
| / هعالجة المحتوى / 
AB EER EEE‏ 
1 عناصر ¢ AS‏ [ اع :و 
موت وغ زلا 
ج الدرس 19 هم GC UU‏ 04074 ارم 
: تنسيق الخط فى صفحة الويب بإستخدام الأمر font> ...... > / 10111١‏ 
4 يتم تنسيق الخصائص ( نوع ولون وحجم) الخط من خلال الامر < ]1011 > حيث ان له مجموعه 
1 > الأمر: من الخصائص : (body dir="rt1">‏ 
(font face="andalus" color="red" 51262"6"( <font> ..‏ 
</font> 1‏ مدرسني جميلة ونظيفة ومتطور 
لتنسيق الخط (font)‏ 
(/body? 9%‏ 
: ملا حظات هامي + 
صم ١-يتعرف‏ المستعرض على ۷ احجام مختلفتّ من الخطوط أى الخاصيت 51756 تأخذ قيمت من ١‏ إلى ۷ 
1 > الأوا ؟-فى حالت عدة استخدام الامر < ]1011 > يظهر نوع الخط على صفحتة الويب بالشكل الافتراضى 
١‏ 3 3 ۳-ل يد ان ينتهى الامر < ]101 > يأمر الاغلاق < / 1011 > 
4 و <I>‏ تنسيقات الخط من خلال مجموعه من الاوامر: 
<b> , 1‏ 
<u> ١‏ فى NS‏ ع عا يوه 
4# وضع خط تحت النص Under Line‏ 
٠)‏ لتغيير نمط جعل النص عريض 15010 
الخط جعل النص مائل ©1]211 
0 "5ه "عمج وده Font Face=™"andalus"™" color="red"‏ 
اللا ر > صحكرم_صسحتس. جسلة و فة ورصمتطوريج ج > 
yT Font <<‏ < 
صم مدوسقي جميلة ونظيفة ومتطو و25 ã‏ 
١‏ 
0 


× ر وک ر JK‏ × )رد وک ر Xaco) CJ XI‏ 9 ا 


Op 


08 
كم 


9 Gaon 4 ث2‎ OD @ a O @ a ث2 @ ارت‎ O @ a OD @ a O @ a OD @ a OD @ a OD @ a OD @ a ارت‎ 20 a OD @ a O @ a O @ a O 


التحمنير ا للصف الثانى الإعدادى ۲۰۱۷ ج أ محمود سید قرنى ۰۱۱٥۸۲۱۸۸16/۸‏ 


التهيئة 


س١:-‏ 
الوسائل التعليمية 


ل لس ن ت ت ت سس لس سس سم سم سم 


مساوم [١‏ إجرادات الدرس 


ال اك ا ال ال ل ال الك اك ل اتات 


> إدراج صورة داخل 


صفحة الويب 


بالأمر <عدرi>‏ 


التحكم في أبعاد 
الصورة بصفحة 
الويب الخاصية 
height‏ 

و الخاصية 
width‏ 

محاذاة الصورة 
داخل صفحة الويب 
بالخاصية 4111 


QR 


ان يتعرف على كيفية إدراج صورة داخل صفحة الويب 
ان يقوم بتغيير ابعاد الصور 

ان يدرك الفرق بين الخاصية "21111021171 و الخاصية 757112111 
هل يمكن ادراج صورة المدرسة ع صفحة الويب ؟ 


جهاز عرض 511077 1(948-+- جهاز الكمبيوتر+السبورة 


2 ضح ضح ضح ضح ضح كا سانل 


ل الك ال ال ال ال لل ل ا ا ال E‏ 


SET [ AS 


9 هل COUNTY U UU‏ رمم 
التعا | فى صفحات | 
خطوات إدراج صورة داخل صفحتة الويب باستخدام الأمر < 11115 > 
يتم إدراج صورة داخل صفحة الويب بإستخدام خاصية 5۲٥‏ التابعة للأمر < 111185 > 
لاحظ : يفضل ان ملف الصورة وملف صفحت الويب فى مجلد واحد 
- فى حال تواجد ملف الصورة فى مجلد آخر يجب كتابة مسار ملف الصورة كاملا 
JPEG" >‏ - الدصمه ططاه ه ""جحدج <ãimg sr‏ 
۲-التحكم فى أبعاد الصورة بصفحة الويب 
يتم التحكم فى أبعاد الصورة من خلال الخاصيتين الارتفاع "11618171 " والعرض "77/1011 
يتم التحكم فى ابعاد الصورة من خلال خصائص الأمر :< 1103> كالاتى : 
الخاصيت )1ء٠(‏ ارتفاع الصورة): مثال "۲۰" = heigh)‏ 
(عرض الصورة): مثال w1d t1 = "٣٠۰"‏ 
يتم استخدام وحدة القياس ال "1161" لقياس أبعاد الصورة 
(ime 51"62"51001.102“ 116212450 width=“800"21‏ 
يتم التحكم فى محاذاه الصورة الخاصيت " 41151 " 
التابعت للأمر "11718" وتأخذ القيم الآتيت 


محاذاه الصورة يمين صفحتة الويب 
محاذاه الصورة يسار صفحتة الويب 

النص يقع بمحاذاه منتصف الصورة 

النص يقع بمحاذاه الحافت السفلى للصورة 
النص يقع بمحاذاه الحافتة العليا للصورة 


Right 
Left 


Middle 
Bottom 


To 


كيف يمكن إدراج صورة داخل صفحة الويب؟ 


& التحمنیر الاليكترونى لصف الثانی الإعدادى ۲۰۱۷ 


عنوان الدرصس ١‏ 
تاجع اضافةوصساخط هتعددة 


ao @ >سس‎ O @ >سس‎ O @ ak O 20 ak O 20 »سس‎ O 


9 Gaon 4 O Aon Mao Mao Mao Mao Kao aor aor ب(‎ 


التهيئة 


س١‏ 5 
الوسائل التعليمية 


- 


> إدراج الصوت 
<bgsound>‏ 


> إدراج فيديو داخل 
صفحة الويب 
بالأمر 
<embed>‏ 

> إدراج ارتباط 
بصفحة الويب 
بالأمر 
<a>...</a>‏ 

> إدراج ارتباط 
تشعبي لصورة 


QR 


ج / محمود سید قرتى م *۱19۸11۸۸٦10/‏ 


ان يتعرف على خطوات إدراج صوت كخلفية صوتية لصفحة الويب 
ان يوضح الفرق بين ادراج الصوت والفيديو 
ان يشعر بالمتعه اثناء تطبيق عناصرالدرس 


مالمقصود بال HYPER LINK‏ ؟ 


جهاز عرض 0wWط؟‏ و)ھ٥-+-‏ جهاز الكمبيوتر+السبورة 
٠‏ إصتراتيجية ًأ ار البحث والاستكطاف ٣‏ 
ٍ ا 5 إججرادات الد رس تعليم کعاونی ٣‏ 
AS ¢‏ [ ناض :و 
9 هن COUN UU‏ يعم 


يتم إدراج صوت داخل صفحتة الويب بإستخدام خاصيتّ 510 التابعت للأمر < 885011110 > 


لاحظ : )١‏ يفضل ان ملف الصوت وملف صفحت الويب فى مجلد واحد 
= کی حال توا خد ملف الضبوت فى مح لخر مج كا مسار ملف اتوت كاماد 

؟) برنامج مستعرض الإنترنت ٤×۲10۲۴۲۰:‏ )11316111 هو المستعرض الوحيد الذى كادعم 
تنفين الأمر <185011110> لإد ا رج الصوت كخلفيتّ صوتيتّ لصفحتة الويب ولا يظهر تاثير هذا 
الا الانواع الاخ ¿ المستعرضات 

ا ا ا SC" ‘egypt. MP3"‏ ايك 

إدراح فيديو داخل صفح الوب باستخدا 

- يتم إدراج صوت داخل صفحة الويب بإستخدام خاصيت التابعت > ا >< 

لاحظ:- يفضل ان ملف الفيديو يكون أحد الامتدادات الآتينّ ( 0007¥. - 2571. - (.swÊ‏ 


مثال قم بكتابنّ الكود لإدراج فيديو 56262 <embed‏ 
اسمه " 112161121 " ويكون إمتداده 2571. 


إدراج ارتباط تشعبى بصفحة الويب بإستخدام الآمر <2 > ..... <4> 
الارتباط التشعبى [11٤‏ 115770©1:- هو عبارة عن صورةأو نص مرتبط بعنوان وعندالضغط عليه 
يتم الانتقال إلى هذا العنوان ويمكن أن يكون داخل الصفحة أو بصفحتة أخرى داخل نفس الموقع 
يتم إدراج ارتباط تشعبى بإستخدام الخاصيت 11161 التابعت للأمر <4> 


أولا : إدراج ارتباط تشعبى نصى ( نص فائق ) بإستخدام الخاصيت 1۲۴۴ للأمر <4> 
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معرفىي ( إن يتعرف على شكل التصميم : 
مهيارى ان يقوم بانشاء التصميم 3 

| 7 

وجدانی ان يطبق الامكانيات التى تعلمها من خلال لعة 1177/11 : 
التهيئة س١:-‏ قم بتجميع بعض الصور عن مدرستك . 

الوسائل التعليمية | جهاز عرض :510 129428-+- جهاز الكمبيوتر+السبورة ١‏ 
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> إنشاء صفحة 
الويب الرئيسة 
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home.htm 
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حخطيط تمقصيني تمشروح 'موقع مدرستي 
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إنشاء صفحة الويب " عن المدرسة " صغabout.h‏ 
> إنشاء صفحة 


الويب عن 
المدرسة - النصوص: "تاريخ نشنه المدرسة ' -” عنوان المدرسة" - 'تليفون المدرسة' 


الخط (لونه أحمر - نوعه 1310173 - حجمه .)١‏ عن المدرسة 
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تتكون صفحة الويب ' عن المدرسة" من الاتي: 


ا 


about.htm 
... فيديو. تاريخ نشأة المدرسة:‎ - 
... عنوان المدرسة: .... تليفون المدرسة:‎ 


- ارتباط تشعبي صورة (عند الضغط عليه يرجع للصفحة الرئيسة). 
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كود صفحة الويب "عن المدرسة" كالاتي: 
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- ارتباط تشعبي صورة (عند الضغط عليه يرجع للصفحة الرئيسة). 4 


إنشاء صفحة الويب " الرؤية والرسالة " vision.htm‏ 


< إنشاء صفحة 


الويب الرؤية 
والرسالة 
مط ntact‏ | تتكون صفحة الويب ' الرؤية والرسالة' من الاتي: الرؤية والرسالة 


- النص الرؤية والرسالة' 


الخط (لونه أحمر - نوعه 1380173 - حجمه 5). إعلك طالب تنیز کل لى ... 


رؤية المدرسة: 
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وجدانى ان تعاون مع اصدقائه فى التصميم 
۱ التهيئة س١:-‏ قم بتجميع عدد ” صور عن مبنى المدرسة والمعامل ١‏ 
الوسائل التعليمية | جهاز عرض :510 12948-+- جهاز الكمبيوتر+السبورة 
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التهيئة س١:-‏ | راجع اهم المصطلحات بالمنهج 
الوسائل التعليمية | جهاز عرض :510 129]8-+- جهاز الكمبيوتر+السبورة 
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ان يتذكر اهم المصطلحات والمفاهيم بالمنهج 
مهارى ان يقوم بشرح اجابات بعض الاسئلة 
وجدانی ان يجيب على اسئلة عما قام بدراسته 
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اکس وال الکو ال-2 احختر احجابة الكلصحبحة اتمتاسسة كلعمارلات ات4 : چ 
RED‏ 
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Hyper Text Markup Library —Î 
- ج2312‎ Table Made Layout — 
-Hyper Text Markup Language —çe 


)4 صقحة اتويب التي يتم استخدام تلخة -اM‏ 3 83 كقط كي تصميمها تعتير صفقفحةه لت ع ا 
آس تشاحطية _ 
ب --قخشطظةه _ 
- کایحة۔ 
) اسكتكداح لغات مكل غعجوة عع ج22 ردروا ل و PHP‏ يالاصاقةك تلخة MM‏ 8 834 كي تصمیم صفحة الويي یکوت 
يغر ص تحو لها الى صفحة AE SS OS‏ كعات 
1 تشاحطلية _ 
مي حر قكيسسميية _ 


جح كر حيه - 


( > ) اهار ن©نص علي صقفقحة اتويب يحم كتاية هد١‏ التص كي متطقة جد کیک اك کرک چ 
-Head 5‏ 
مي - TE‏ - 
ح- Body‏ - 
السوال الخاتى: احخحر منت المجموعة (نب) صا بتاسب المجموعة ( 3[ )2 
25 ب2 
5- موقع اتويب 2 ) مسسلتتد يه محتوي الكتر وتي يتشر حلى شيكة الاتترتت ويتح 


حعرصه مت خلال يرتامج مستعر ص الاتترقت 


+ - التصفحة الركيسة 2 ) قتعرصض معلومات يتح اللاطلاح عليها حط يدوت امكاتية 
اجراء اي معالجة مت الرزاكربيت لمحتواها 
٣‏ صفحة الويبي 2 ) مكات علي شيكة الاتترتت يتكو ت مت صفحة ويب أو آكثر 


ويتم زيارته مت خلال حتوات معين 
> - إلصفحة التايحة 2 ) آول صفحة يموكح الويبي والتي مت حخلاالها يسهل الإاتتقال 
تياخكي صفحات الموقع 
ه - الصفحة التقا حلية 2 ) هي خاصية تلتتقل ييت صفحات الموقعح 
2 ) هي صقحة معلومات تعرض محتوي يتيح للراتر يت التقاحل 
معه ومعالجته 
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